<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>更新用户</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="javascript:;" method="post" id="updateUserForm">
    <input type="hidden" name="id" value="${user.id}">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" required lay-verify="required"
                       value="${user.name}" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="pass" id="pass" required lay-verify="required"
                       value="${user.pass}" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <button type="submit" class="layui-btn layui-btn-normal" id="submitBtn">立即更新</button>
        </div>
    </div>
</form>

<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/layui/layui.js"></script>

<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;

        // 表单提交事件
        $('#submitBtn').on('click', function() {
            var name = $('#name').val().trim();
            var pass = $('#pass').val().trim();
            var userId = $('input[name="id"]').val();

            // 校验用户名和密码是否为空
            if (name === '') {
                layer.msg('请输入用户名');
                return;
            }
            if (pass === '') {
                layer.msg('请输入密码');
                return;
            }

            // 使用 AJAX 提交更新数据
            $.ajax({
                url: '/user/updateSave',
                type: 'POST',
                data: {
                    id: userId,
                    name: name,
                    pass: pass
                },
                success: function(response) {
                    if (response === 'success') {
                        layer.msg('更新成功', { icon: 1 });
                        setTimeout(function() {
                            // 关闭当前弹窗
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            // 这里可以触发刷新表格或执行其他操作
                            parent.table.reload('test');
                        }, 1000);
                    } else {
                        layer.msg('更新失败，请重试', { icon: 2 });
                    }
                },
                error: function() {
                    layer.msg('请求失败，请稍后再试', { icon: 2 });
                }
            });
        });
    });
</script>
</body>
</html>
